<template>
<div>
  <cfg-pointer :mark="mark" :value="value" :config="{type:'display'}" :label="label" @select="select">
</cfg-pointer>
  <CfgEventInstanceModal :drawer="drawer" :filtered="value" @submit="submit"></CfgEventInstanceModal>
</div>
</template>

<script>
import CfgPointer from "./cfg-pointer";
export default {
  name: "cfg-event-pointer",
  components: {CfgPointer},
  model:{
    prop:'value',
    event:'change'
  },
  data(){
    return {
      drawer:{
        show:false
      },
    }
  },
  props:{
    mark:{
      default:()=>{
        return false;
      }
    },
    label:{
      default:()=>{
        return '';
      }
    },
    value:{
      default:()=>{
        return {};
      }
    }
  },
  methods:{
    select(){
      this.$set(this.drawer,'show',true)
    },
    submit(data){
      this.$emit('change',{category:data.category,name:data.name})
    }
  }
}
</script>

<style scoped>

</style>